<template>
  <div 
    class="bx-popover"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <slot></slot>
    <transition name="bx-popover-fade">
      <div 
        v-if="showPopover"
        class="bx-popover__popper bx-glass"
        :style="popperStyle"
      >
        <div class="bx-popover__content">
          <slot name="content">{{ content }}</slot>
        </div>
        <div v-if="showArrow" class="bx-popover__arrow"></div>
      </div>
    </transition>
  </div>
</template>

<script>
import { ref, computed, nextTick } from 'vue'

export default {
  name: 'BxPopover',
  props: {
    content: {
      type: String,
      default: ''
    },
    placement: {
      type: String,
      default: 'top',
      validator: (value) => [
        'top', 'top-start', 'top-end',
        'bottom', 'bottom-start', 'bottom-end',
        'left', 'left-start', 'left-end',
        'right', 'right-start', 'right-end'
      ].includes(value)
    },
    trigger: {
      type: String,
      default: 'hover',
      validator: (value) => ['hover', 'click', 'focus'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    },
    delay: {
      type: Number,
      default: 100
    },
    duration: {
      type: Number,
      default: 200
    },
    showArrow: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const showPopover = ref(false)
    let enterTimer = null
    let leaveTimer = null

    const popperStyle = computed(() => {
      const style = {}
      switch (props.placement) {
        case 'top':
        case 'top-start':
        case 'top-end':
          style.bottom = 'calc(100% + 8px)'
          break
        case 'bottom':
        case 'bottom-start':
        case 'bottom-end':
          style.top = 'calc(100% + 8px)'
          break
        case 'left':
        case 'left-start':
        case 'left-end':
          style.right = 'calc(100% + 8px)'
          break
        case 'right':
        case 'right-start':
        case 'right-end':
          style.left = 'calc(100% + 8px)'
          break
      }

      if (props.placement.includes('top') || props.placement.includes('bottom')) {
        style.left = '50%'
        style.transform = 'translateX(-50%)'
      } else if (props.placement.includes('left') || props.placement.includes('right')) {
        style.top = '50%'
        style.transform = 'translateY(-50%)'
      }

      return style
    })

    const handleMouseEnter = () => {
      if (props.disabled || props.trigger !== 'hover') return
      clearTimeout(leaveTimer)
      enterTimer = setTimeout(() => {
        showPopover.value = true
      }, props.delay)
    }

    const handleMouseLeave = () => {
      if (props.disabled || props.trigger !== 'hover') return
      clearTimeout(enterTimer)
      leaveTimer = setTimeout(() => {
        showPopover.value = false
      }, props.duration)
    }

    const handleClick = () => {
      if (props.disabled || props.trigger !== 'click') return
      showPopover.value = !showPopover.value
    }

    const handleFocus = () => {
      if (props.disabled || props.trigger !== 'focus') return
      showPopover.value = true
    }

    const handleBlur = () => {
      if (props.disabled || props.trigger !== 'focus') return
      showPopover.value = false
    }

    return {
      showPopover,
      popperStyle,
      handleMouseEnter,
      handleMouseLeave,
      handleClick,
      handleFocus,
      handleBlur
    }
  }
}
</script>

<style scoped>
.bx-popover {
  display: inline-block;
  position: relative;
  font-family: var(--bx-font-family);
}

.bx-popover__popper {
  position: absolute;
  padding: 8px 12px;
  border-radius: var(--bx-radius-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9998;
  white-space: nowrap;
  color: var(--bx-text-primary);
  font-size: 13px;
}

.bx-popover__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
}

/* Placement specific styles */
.bx-popover[placement^="top"] .bx-popover__popper {
  transform-origin: center bottom;
}
.bx-popover[placement^="bottom"] .bx-popover__popper {
  transform-origin: center top;
}
.bx-popover[placement^="left"] .bx-popover__popper {
  transform-origin: right center;
}
.bx-popover[placement^="right"] .bx-popover__popper {
  transform-origin: left center;
}

/* Arrow positioning */
.bx-popover[placement="top"] .bx-popover__arrow,
.bx-popover[placement="top-start"] .bx-popover__arrow,
.bx-popover[placement="top-end"] .bx-popover__arrow {
  border-color: var(--bx-glass-bg) transparent transparent transparent;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.bx-popover[placement="bottom"] .bx-popover__arrow,
.bx-popover[placement="bottom-start"] .bx-popover__arrow,
.bx-popover[placement="bottom-end"] .bx-popover__arrow {
  border-color: transparent transparent var(--bx-glass-bg) transparent;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.bx-popover[placement="left"] .bx-popover__arrow,
.bx-popover[placement="left-start"] .bx-popover__arrow,
.bx-popover[placement="left-end"] .bx-popover__arrow {
  border-color: transparent transparent transparent var(--bx-glass-bg);
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.bx-popover[placement="right"] .bx-popover__arrow,
.bx-popover[placement="right-start"] .bx-popover__arrow,
.bx-popover[placement="right-end"] .bx-popover__arrow {
  border-color: transparent var(--bx-glass-bg) transparent transparent;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
}

/* Fade transition */
.bx-popover-fade-enter-active,
.bx-popover-fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bx-popover-fade-enter-from,
.bx-popover-fade-leave-to {
  opacity: 0;
  transform: translateY(5px); /* Example for top placement */
}
</style>

